<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>bind marchant</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/button_demo1.css">
</head>

<body>
<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        bind marchant
        <small>page</small>
    </h1>
</section>

<section class="content  col-lg-3 col-xs-12">
    <div class="box">
        <div class="panel panel-success col-lg-12  col-xs-12">
            <div class="panel-heading">
                input merchant information:
            </div>

            <div class="panel-body">
                <div class="row">

                    <div class="col-lg-12  col-xs-12">
                        <label class="col-lg-12  col-xs-12">merchant name:</label>
                        <input type="text" class="form-control" id="merchant_name_input">
                    </div>

                    <div class="col-lg-12  col-xs-12">
                        <label class="col-lg-12  col-xs-12">merchant address:</label>
                        <input type="text" class="form-control" id="merchant_address_input">
                    </div>

                    <div class="col-lg-12  col-xs-12">
                        <label class="col-lg-12  col-xs-12">city area:</label>
                        <input type="text" class="form-control" id="city_area_input">
                    </div>

                    <div class="col-lg-12  col-xs-12">
                        <label class="col-lg-12  col-xs-12">phone number:</label>
                        <input type="text" class="form-control" id="phone_number_input"
                               onKeyUp="value=value.replace(/\D/g,'')"
                               onafterpaste="value=value.replace(/\D/g,'')">
                    </div>

                    <div class="col-lg-12  col-xs-12">
                        <label class="col-lg-12  col-xs-12">open info:</label>
                        <input type="text" class="form-control" id="open_info_input">
                    </div>

                    <div class="col-lg-12  col-xs-12">
                        <label class="col-lg-12  col-xs-12">wifi:</label>
                        <select type="text" class="form-control" id="wifi_input">
                            <option>yes</option>
                            <option>no</option>
                        </select>
                    </div>

                    <div class="col-lg-12  col-xs-12">
                        <label class="col-lg-12  col-xs-12">usage fee:</label>
                        <input type="text" class="form-control" id="usage_fee_input">
                    </div>

                    <div class="col-lg-12  col-xs-12">
                        <label class="col-lg-12  col-xs-12">device list:</label>
                        <input class="col-lg-10  col-xs-10" type="text" class="form-control" id="device_temp"
                               onKeyUp="value=value.replace(/\D/g,'')"
                               onafterpaste="value=value.replace(/\D/g,'')">

                        <button class="col-lg-2  col-xs-2" type="button" class="btn btn-default btn-sm"
                                onclick="add_device();">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </div>


                    <div class="col-lg-12  col-xs-12">
                        <table class="col-lg-12  col-xs-12" frame="box" id="device_list_input">
                            <%--<tr>--%>
                                <%--<td width="80%">1000000000</td>--%>
                                <%--<td width="20%"><button class="btn btn-default btn-sm" onclick="$(this).parent().parent().remove()"><span class="glyphicon glyphicon-minus"></span></button></td>--%>
                                <%--</tr>--%>
                        </table>
                    </div>

                </div>

                <br/>

                <div class="row">
                    <div class="col-lg-4  col-xs-4 col-lg-offset-8 col-xs-offset-8">
                        <b class="form-control a_demo_two" onclick="bind_submit();">submit</b>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>

</script>

<script>
    var A = "<tr> <td width=\"80%\">";
    var B = "</td> <td width=\"20%\"><button class=\"btn btn-default btn-sm\" onclick=\"$(this).parent().parent().remove()\"><span class=\"glyphicon glyphicon-minus\"></span></button></td> </tr>";


    $(document).ready(function () {
//        $("#bind_page").hide();
//        $("#modify_page").hide();
//        $("#device_list_input").attr("disabled", true);
    });

    //    function modify() {
    //        if (!/^\d{1,15}$/.test($("#poiid_input").val())) {
    //            alert("device length 0?");
    //            return
    //        } else {
    //            $("#bind_page").hide();
    //            $("#modify_page").show();
    //
    //        }
    //    }


    function add_device() {
        if (!/^(\d{12}|\d{15})$/.test($("#device_temp").val())) {
            alert("device length 12 or 15!");
            return
        } else {
            $("#device_list_input").append(A + $("#device_temp").val() + B);
        }
    }

    function bind_submit() {
        if ($("#device_list_input tr").length == 0) {
            alert("no device input");
            return;
        }

        var ALL = "merchant name:" + $("#merchant_name_input").val() + "\n" +
                "merchant address:" + $("#merchant_address_input").val() + "\n" +
                "city area:" + $("#city_area_input").val() + "\n" +
                "phone number:" + $("#phone_number_input").val() + "\n" +
                "open info:" + $("#open_info_input").val() + "\n" +
                "wifi:" + $("#wifi_input").val() + "\n" +
                "usage fee:" + $("#usage_fee_input").val() + "\n";

        var dev_list = new Array();
        var DEV = "device list:";
        for (var i = 0; i < $("#device_list_input tr").length; i++) {
            numberStr = $("#device_list_input tr").eq(i).find("td:first").html();
            dev_list.push(numberStr);
            DEV += "\n" + numberStr;
        }
        var ret = confirm(ALL + DEV);
        if (ret == true) {
            var send_data = {
                merchant_name: $("#merchant_name_input").val(),
                merchant_address: $("#merchant_address_input").val(),
                city_area: $("#city_area_input").val(),
                phone_number: $("#phone_number_input").val(),
                open_info: $("#open_info_input").val(),
                wifi: $("#wifi_input").val(),
                usage_fee: $("#usage_fee_input").val(),
                device_list: dev_list
            };
            send_json_data = (JSON.stringify(send_data));
            send_bind_msg(send_json_data);
        } else {
            return;
        }
    }

    function send_bind_msg(send_json_data) {

        $.ajax({
            type: 'POST',
            url: "/merchant/bind_info.inner",
            contentType: 'application/json',
            dataType: "text",
            data: send_json_data,
            timeout: 10000,
            success: function (data) {
                alert("poiid:" + data);
            }
        });
    }

</script>

</body>
</html>